﻿<div class="container">
    <h1 class="title is-size-1 has-text-centered">Force Fallback to JavaScript</h1>
    <p class="mb-4">Due to HTML5 drag and drop not being universally supported and the loss of control over the styling forceFallback is set to true by default for this library so the HTML5 drag and drop is not used. If preferred, you can set the 'ForceFallback' to false to get SortableJS's default behavior. The list on the left has 'ForceFallback' set to true, and the list on the right has ForceFallback set to false.</p>
    <Tabs CodeContent="@codeContent">
        <ExampleContent>
            <div class="columns">
                <div class="column">
                    <SortableList Id="forceFallback1" Items="items" OnUpdate="@SortList" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="forceFallback2" Items="items2" OnUpdate="@SortList" Context="item" ForceFallback="false">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </ExampleContent>
    </Tabs>
</div>

@code {

    private string codeContent = $@"
    <SortableList Id=""forceFallback1"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""forceFallback2"" Items=""items2"" OnUpdate=""@SortList"" Context=""item"" ForceFallback=""false"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();

        public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();

        private void SortList((int oldIndex, int newIndex) indices)
        {{
            // deconstruct the tuple
            var (oldIndex, newIndex) = indices;

            var items = this.items;
            var itemToMove = items[oldIndex];
            items.RemoveAt(oldIndex);

            if (newIndex < items.Count)
            {{
                items.Insert(newIndex, itemToMove);
            }}
            else
            {{
                items.Add(itemToMove);
            }}

            StateHasChanged();
        }}
    }}
    ";

    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }
}